<template>
  <view class="wk-field wk-field-input">
    <view v-if="_label" class="wk-field__label">
      <view v-if="field.isNull === 1" class="line" />
      {{ _label }}
    </view>
    <!--class="wk-field__body" 这一个影响了-->
    <view>
      <!--:value="value" 报警告： Avoid mutating a prop directly
      since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"-->
      <input type="text" :value="value" placeholder="请输入内容" @input="input">
      <fuzzy-list
        label-name="name"
        value-name="id"
        type="text"
        align="center"
        class="wk-field__body-core"
        no-data="暂无匹配数据"
        :show="show"
        :list="list"
        :custom-style="{ fontSize: '30rpx' }"
        @scrolltolower="scrolltolower"
        @select="select"
      />
    </view>
  </view>
</template>z

<script>
  import FuzzyList from './qj-fuzzy-search';
  import debounce from './debounce.js'; // 防抖函数
  import {httpGetList, crmEnterpriseListAPI} from './api.js';
  import mixins from '../wk-form/mixins';

  export default {
    name: 'UniAutoInput',
    components: {
      FuzzyList,
    },
    mixins: [mixins],
    props: {
      value: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        queryParams: {
          pageSize: 10,
          pageNum: 1
        },
        // value: '',
        show: false,
        list: [],
        selectData: null,
        otherVal: null
      };
    },
    methods: {
      handleClick() {
        if (this.field.disabled) {
          if (this.config && this.config.disabledMsg) {
            this.$toast(this.config.disabledMsg)
          }
          return
        }
      },
      input(event) {
        this.value = event.target.value;
        this.queryParams.pageNum = 1;
        debounce(this.getList, 500);
      },

      scrolltolower() {
        this.queryParams.pageNum++;
        this.getList();
      },

      getList() {
        const {queryParams, value} = this;
        /** 生成随机值 */
        const getRandomNumber = () => Math.random().toString(16).slice(2);
        let bussinessInfoList = []
        /** 输入框内字符数不小于3个就进行搜索，否则就暂不开始搜索 */
        if (value.length >= 3) {
          // 调用api查询搜索数据,构造出 bussinessInfoList
          crmEnterpriseListAPI(value).then(res => {
            bussinessInfoList = res.Result
            // nameList.map(item => ({
            //   name: item.name,
            //   id: getRandomNumber()
            // }))
            let data = []
            for (let i = 0; i < queryParams.pageNum; i++) {
              let list = bussinessInfoList.map(item => ({
                name: item.Name,
                id: getRandomNumber()
              }))
              data = [...data, ...list]
            }
            data = data.filter(item => item.name.includes(value))
            this.list = data;
            if (!this.show) this.show = true;
          })
        } else {
          this.show = false;
        }
      },

      select(event) {
        this.show = false;
        this.value = event.name;
        this.selectData = JSON.stringify(event);
        this.formValue = event.name
        this.$emit('input', this.formValue)
        this.$emit('change', {
          index: this.index,
          field: this.field,
          value: this.formValue
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
@import '../wk-form/wkField.scss';

//.test {
//  display: flex;
//  flex-direction: column;
//  align-items: center;
//  justify-content: center;
//}
//
//.content {
//  margin-top: 2px;
//  padding: 10px;
//  width: 100vw;
//  background-color: $uni-bg-color-hover;
//  text-indent: 10px;
//
//  .input {
//    margin-top: 5px;
//    display: flex;
//    justify-content: space-between;
//    align-items: center;
//  }
//}
</style>
